<template>
  <div class="filters">
    <el-row
      type="flex"
      class="filters-top"
      justify="space-between"
      align="middle"
    >
      <el-col :span="8"> 单程： {{data.info.departCity}} - {{data.info.destCity}} / {{data.info.departDate}} </el-col>

      <el-col :span="4">
        <el-select
          size="mini"
          v-model="airport"
          placeholder="起飞机场"
          @change="runFilters"
        >
          <el-option
            v-for="(airport, index) in data.options.airport"
            :key="index"
            :value="airport"
            :label="airport"
          > </el-option>
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-select
          size="mini"
          v-model="flightTimes"
          placeholder="起飞时间"
          @change="runFilters"
        >
          <!-- <el-option label="00:00 - 06:00" value="1"> </el-option> -->
          <el-option
            v-for="(time, index) in data.options.flightTimes"
            :key="index"
            :label="time.from + ':00' + ' - ' + time.to + ':00'"
            :value="time.from + ',' + time.to"
          > </el-option>
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-select
          size="mini"
          v-model="company"
          placeholder="航空公司"
          @change="runFilters"
        >
          <el-option
            v-for="(company, index) in data.options.company"
            :key="index"
            :label="company"
            :value="company"
          > </el-option>
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-select
          size="mini"
          v-model="airSize"
          placeholder="机型"
          @change="runFilters"
        >
          <el-option
            v-for="(size, index) in sizeTable"
            :key="index"
            :label="size.label"
            :value="size.value"
          > </el-option>
        </el-select>
      </el-col>

    </el-row>
    <div class="filter-cancel">
      筛选：
      <el-button
        type="primary"
        round
        plain
        size="mini"
        @click="handleFiltersCancel"
      >
        撤销
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      airport: "",
      flightTimes: "",
      company: "",
      airSize: "",
      sizeTable: [
        {
          label: "大",
          value: "L",
        },
        {
          label: "中",
          value: "M",
        },
        {
          label: "小",
          value: "S",
        },
      ],
    };
  },
  methods: {
    runFilters() {
      let flights = [...this.data.flights];
      // 起飞机场
      if (this.airport) {
        flights = this.handleAirport(flights);
      }
      // 起飞时间
      if (this.flightTimes) {
        flights = this.handleFlightTimes(flights);
      }
      // 起飞公司
      if (this.company) {
        flights = this.handleCompany(flights);
      }
      // 飞机的大小
      if (this.airSize) {
        flights = this.handleAirSize(flights);
      }
      this.$emit("setFilteredList", flights);
    },
    // 起飞机场
    handleAirport(flights) {
      let airList = flights.filter((v) => {
        return v.org_airport_name == this.airport;
      });
      return airList;
    },
    // 起飞时间
    handleFlightTimes(flights) {
      let airList = flights.filter((v) => {
        let hour = Number(v.dep_time.split(":")[0]);
        return (
          Number(this.flightTimes.split(",")[0]) <= hour &&
          hour <= Number(this.flightTimes.split(",")[1])
        );
      });
      return airList;
    },
    // 起飞公司
    handleCompany(flights) {
      let airList = flights.filter((v) => {
        return v.airline_name == this.company;
      });
      return airList;
    },
    // 飞机的大小
    handleAirSize(flights) {
      let airList = flights.filter((v) => {
        return v.plane_size == this.airSize;
      });
      return airList;
    },
    // 撤销事件
    handleFiltersCancel() {
      this.airport = "";
      this.flightTimes = "";
      this.company = "";
      this.airSize = "";
      this.$emit("setFilteredList", this.data.flights);
    },
  },
  created() {
    console.log(this.data);
  },
};
</script>

<style>
</style>